<script>
init({
  title: 'Modal Table',
  desc: 'Use Bootstrap Table in a modal. We need to call `resetView` method after modal shown.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <a
    id="button"
    class="waves-effect waves-light btn modal-trigger btn-large"
    href="#modal1"
  >Launch modal table</a>

  <div
    id="modal1"
    class="modal"
  >
    <div class="modal-content">
      <h4>Modal table</h4>
      <p>
        <table
          id="table"
          data-toggle="table"
          data-height="345"
          data-url="json/data1.json"
        >
          <thead>
            <tr>
              <th data-field="id">
                ID
              </th>
              <th data-field="name">
                Item Name
              </th>
              <th data-field="price">
                Item Price
              </th>
            </tr>
          </thead>
        </table>
      </p>
      <div class="modal-footer">
        <a
          href="#!"
          class="modal-close waves-effect waves-green btn-flat"
        >Close</a>
      </div>
    </div>
  </div>
</template>

<script>
  const $table = $('#table')

  function mounted () {
    $('.modal').modal({
      onOpenEnd () {
        $table.bootstrapTable('resetView')
      }
    })
  }
</script>
